<template>
  <div class="search">
    <!-- <el-input v-model="searchReadId" placeholder="enter borrow ReaderId to search" class="input"></el-input> -->
    <el-button type="primary" value="return" @click="searchAll">all borrow books</el-button>
    <el-button type="primary" value="return" @click="search">screen overdue books</el-button>
  </div>
  <el-table :data="showMyData" style="width: 100%">
    <el-table-column prop="bookId" label="bookId" width="140"></el-table-column>
    <el-table-column prop="isbn" label="ISBN" width="140"></el-table-column>
    <el-table-column prop="readerId" label="borrow readerId" width="140"></el-table-column>
    <el-table-column prop="isReturned" label="returned" width="140" :formatter="yesOrNoFormatter"></el-table-column>
    <el-table-column
      prop="borrowDate"
      label="borrow Date"
      width="180"
      :formatter="dateFormatter"
    ></el-table-column>
    <el-table-column
      prop="returnDate"
      label="return Date"
      width="180"
      :formatter="dateFormatter"
    ></el-table-column>
    <el-table-column prop="fineAmount" label="arrearage(yuan)" width="150" :formatter="arrearageFormatter"></el-table-column>
    <el-table-column
      prop="realReturnDate"
      label="real Return Date"
      :formatter="dateFormatter"
    ></el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import * as bookApi from "@/api/books";

const search = () => {
  showMyData.value = myData.value.filter(item => item?.fineAmount > 0)
  console.log("🚀 ~ file: HistoryOfAllBorrow.vue ~ line 39 ~ search ~ showMyData.value", showMyData.value)
};
const searchAll = () => {
  showMyData.value = myData.value;
};

const myData = ref<any[]>([]);
const showMyData = ref<any[]>([]);
const getData = () => {
  bookApi.getAllBorrowHistory().then((data) => {
    myData.value = data;
    showMyData.value = myData.value;
    console.log('data', data);
  });
};
const dateFormatter = (row: any, col: any, value: string | number | Date | any) => {
  if (!value) {
    return '/';
  }
  return `${new Date(value).toLocaleDateString()} ${new Date(value).toLocaleTimeString()}`;
};

const yesOrNoFormatter = (row: any, col: any, value: boolean) => {
  return value ? "yes" : "no";
};

const arrearageFormatter = (row: any, col: any, value: string | number) => {
  return (!value ||  Number(value) === 0) ? '/' : value;
};

onMounted(() => {
  getData();
});
</script>

<style scoped>
.search {
  float: left;
  margin-bottom: 10px;
}
.search .input {
  width: 240px;
  margin-right: 20px;
}
</style>
